//react 提供了 lazy 和 Suspense 实现路由懒加载
import { lazy, Suspense } from 'react';

import { Navigate, useRoutes } from 'react-router-dom'

import Loading from '../components/Loading';
const NotFound = lazy(() => import('../components/404'))
const List = lazy(() => import('../components/List'))


const Login = lazy(() => import('../pages/Login'))
const Main = lazy(() => import('../pages/Main'))
const About = lazy(() => import('../pages/Main/About'))
const Home = lazy(() => import('../pages/Main/Home'))




//封装一个懒加载函数
const lazyLoading = (Module) => {
  return <Suspense fallback={<Loading />}>
    <Module />
  </Suspense>
}

const routes = [
  {
    path: '/login',
    element: lazyLoading(Login)
  },
  {
    path: '/main',
    element: lazyLoading(Main),
    children: [
      {
        path: '/main/about',
        element: lazyLoading(About)
      },
      {
        path: '/main/home',
        element: lazyLoading(Home),
        children: [
          {
            path: '/main/home/list/:id',
            element: lazyLoading(List)
          }
        ]
      }
    ]
  },
  {
    path: '*',
    element: lazyLoading(NotFound)
  },
  {
    path: '/',
    element: <Navigate to='/login' />
  }
]

export default routes

//自定义组件
export const GetRoutes = () => {
  return useRoutes(routes)
}